@values: range(0,50,1);

// margin style
each(@values, {
    .mt@{value} {
        margin-top: @value * 1px;
    }
    .mb@{value} {
        margin-bottom: @value * 1px;
    }
    .ml@{value} {
        margin-left: @value * 1px;
    }
    .mr@{value} {
        margin-right: @value * 1px;
    }
    .mx@{value} {
        margin-left: @value * 1px;
        margin-right: @value * 1px;
    }
    .my@{value} {
        margin-top: @value * 1px;
        margin-bottom: @value * 1px;
    }
    .m@{value} {
        margin: @value * 1px;
    }
})

//padding style
each(@values, {
    .pt@{value} {
        padding-top: @value * 1px;
    }
    .pb@{value} {
        padding-bottom: @value * 1px;
    }
    .pl@{value} {
        padding-left: @value * 1px;
    }
    .pr@{value} {
        padding-right: @value * 1px;
    }
    .px@{value} {
        padding-left: @value * 1px!important;
        padding-right: @value * 1px!important;
    }
    .py@{value} {
        padding-top: @value * 1px!important;
        padding-bottom: @value * 1px!important;
    }
    .p@{value} {
        padding: @value * 1px!important;
    }
})

// border-radius style
@radius: range(2,20,2);
each(@radius,{
    .radius@{value} {
        border-radius: @value * 1px;
    }
})

// fontSize style
@fontsize: range(12,36,1);
each(@fontsize,{
    .fs@{value} {
        font-size: @value * 1px!important;
    }
})

//width style
@width: range(10,300,5);
each(@width,{
    .w@{value} {
        width: @value * 1px;
    }
})

//height style
@height: range(30,100,5);
each(@height,{
    .h@{value} {
        height: @value * 1px;
    };
    .lh@{value} {
        line-height: @value * 1px;
    };
})

p,ul,li,ol{
  margin: 0;
  padding: 0;
}

//flex-layout
.align-center{
  display: flex;
  align-items: center;
}
.align-end{
  display: flex;
  align-items: flex-end;
}
.justify-start{
  display: flex;
  align-items: center;
  justify-content: start;
}
.justify-between{
  display: flex;
  justify-content: space-between;
}
.justify-around{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.flex-direction{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.flex1{
  flex: 1;
}

//文字颜色
.text-success{
  color: rgb(124, 203, 144);
}
.text-warning{
  color: rgb(230, 157, 54);
}
.text-primary{
  color: #2E5BFF;
}
.text-c333{
  color: #333;
}
.text-c666{
  color: #666;
}
.text-c999{
  color: #999;
}
.text-ceee{
  color: #eee;
}
.text-cfff{
  color: #fff;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}

//background
.bgfff{
  background: #fff;
}
.bgeee{
  background: #eee;
}
.inline-block{
  display: inline-block;
}
.h100p{
  height: 100%;
}
.w100p{
  width: 100%;
}
.reset-btn{
  background: #F2F3F5;
}

.overflow-hide{
  overflow: hidden;
}

.pointer{
  cursor: pointer;
}

.sticky{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 99;
}


#root {
  background-color: #eee;
  height: 100vh;
  overflow: auto;
}
.App{
  height: 100%;
}
.tagsWrapper .rv-selector__item{
  margin-bottom: 5px;
}